.container {
  display: flex;
  flex-direction: row;
  height: 100%;

  .search-bar {
    width: 100%;
    color: #666;
    background: #fff;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
    padding: 12rpx 0;

    .search-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      background: #f0f0f0;
      width: 92%;
      border-radius: 50rpx;
      text-align: center;
      margin: auto;
      .sear-input {
        font-size: 28rpx;
      }
      .search-img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
    .search-hint {
      font-size: 28rpx;
      position: absolute;
      right: 30rpx;
      top: 32rpx;
    }
  }

  .content {
    position: fixed;
    display: flex;
    overflow: hidden;
    height: 100%;
    // margin-top: 86rpx;

    .menu {
      width: 200rpx;
      height: 100%;
      box-sizing: border-box;
      background-color: #f5f5f5;
      overflow: scroll;
      z-index: 2;
      .ca-empty {
        padding-top: 400rpx;
        text-align: center;
        color: #aaa;
        font-size: 24rpx;
      }

      .menu-item {
        line-height: 90rpx;
        height: 90rpx;
        text-align: center;
        border-bottom: 2rpx silid #e3e3e3;
        position: relative;
        color: #777;
        font-size: 28rpx;

        text.tips-num {
          position: absolute;
          top: 20rpx;
          right: 15rpx;
          border-radius: 15rpx;
          width: 30rpx;
          height: 30rpx;
          background: red;
          color: #fff;
          font-size: 25rpx;
          line-height: 30rpx;
        }
      }

      .menu-item.active {
        color: #e02e2e;
        font-size: 28rpx;
        font-weight: bold;
        position: relative;
        background: #fff;

        &:before {
          position: absolute;
          left: 0;
          content: '';
          width: 8rpx;
          height: 32rpx;
          top: 29rpx;
          background: #e02e2e;
        }
      }
    }

    .list {
      width: 550rpx;
      height: 100%;
      box-sizing: border-box;
      background-color: #fff;
      z-index: 1;
      .adver-map {
        width: auto;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        margin: 30rpx 20rpx 0;
        .item-a {
          display: block;
          font-size: 0;
          width: 100%;
          image {
            max-width: 100%;
          }
        }
      }
      .th-cate-con {
        display: flex;
        flex-wrap: wrap;

        .sub-category {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          padding: 30rpx;
          box-sizing: border-box;
          align-items: center;

          .sub-category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            .more-pic {
              width: 120rpx;
              height: 120rpx;
              padding-bottom: 10rpx;
            }
            text {
              font-size: 28rpx;
              word-break: break-word;
            }
          }
        }
      }
      .cont-item {
        padding: 260rpx 20rpx 94rpx 20rpx;
      }
    }

    .empty {
      display: block;
      font-size: 24rpx;
      color: #aaa;
      text-align: center;
    }
  }
}
